<template>
  <div class="ly-emotion" >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ly-emotion',
  data:{
    // img: require('@/assets/logo.png')
  },
  mounted () {
    const name = this.$el.innerHTML
    const list = ['zb1_1', 'zb1_2', 'zb1_3', 'zb1_4', 'zb1_5', 'zb1_6', 'zb1_7', 'zb1_8','zb1_9', 'zb1_10', 'zb1_11', 'zb1_12', 'zb1_13', 'zb1_14', 'zb1_15', 'zb1_16','zb1_17','zb1_18', 'zb1_19', 'zb1_20', 'zb1_21', 'zb1_22', 'zb1_23', 'zb1_24','zb1_25', 'zb1_26', 'zb1_27', 'zb1_28', 'zb1_29', 'zb1_30', 'zb1_31', 'zb1_32','zb1_33', 'zb1_34', 'zb1_35', 'zb1_36', 'zb1_37', 'zb1_38', 'zb1_39', 'zb1_40','zb1_41', 'zb1_42', 'zb1_43', 'zb1_44', 'zb1_45', 'zb1_46', 'zb1_47', 'zb1_48','zb1_49', 'zb1_50', 'zb1_51', 'zb1_52', 'zb1_53', 'zb1_54', 'zb1_55', 'zb1_56','zb1_57', 'zb1_58', 'zb1_59', 'zb1_60', 'zb1_61', 'zb1_62', 'zb1_63', 'zb1_64','zb1_65', 'zb1_66', 'zb1_67', 'zb1_68', 'zb1_69', 'zb1_70', 'zb1_71', 'zb1_72','zb1_73', 'zb1_74', 'zb1_75', 'zb1_76', 'zb1_77', 'zb1_78', 'zb1_79', 'zb1_80','zb1_81', 'zb1_82', 'zb1_83', 'zb1_84', 'zb1_85', 'zb1_86', 'zb1_87', 'zb1_88','zb1_89', 'zb1_90', 'zb1_91', 'zb1_92', 'zb1_93', 'zb1_94', 'zb1_95', 'zb1_96','zb1_97', 'zb1_98', 'zb1_99', 'zb1_100', 'zb1_101', 'zb1_102', 'zb1_103', 'zb1_104']
    let index = list.indexOf(name)
    let imgHTML = `<img src="${require('@/assets/face/'+index+'.gif')}">`;
    // let imgHTML = `<img src="${img}">`
    // let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
    this.$nextTick(() => {
      this.$el.innerHTML = imgHTML
    })
  },

}
</script>
<style scoped>
.ly-emotion {
  display: inline-block
}
.ly-static-emotion {
  width: 24px;
  height: 24px;
  display: inline-block;
}
</style>
